<template>
    <div ref="appBarRef">

        <Head />
        <div ref="appBarRef2"
            class="relative head relative z-[99999] flex flex-col justify-center bg-black px-3 md:px-12 lg:flex-row lg:px-6 xl:px-24">
            <div class="relative z-[430]! flex  w-full max-w-[1280px] flex-row items-center justify-between">
                <div class="flex flex-1 flex-row items-center gap-3 md:gap-7 lg:hidden lg:flex-none" @click="handlCick">
                    <img src="https://media.thestudio.com/website/img/icons/burger_white.svg" alt="Menu"
                        class="menu-hamburger-button hover:cursor-pointer">
                    <div class="hover:cursor-pointer lg:hidden flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="w-[15px] shrink-0 text-white">
                            <circle cx="11" cy="11" r="8"></circle>
                            <path d="m21 21-4.3-4.3"></path>
                        </svg>
                    </div>
                </div>
                <div class="flex-1 justify-center lg:flex-none">
                    <a href="/" class="flex flex-1 items-center justify-center">
                        <img src="/logo.png" class="w-[165px] h-[35px] md:w-[185px] md:h-[45px]" alt="THE/STUDIO logo">
                    </a>
                </div>
                <div class="flex items-center">
                    <div class="hidden flex-row gap-8 lg:flex xl:gap-11">
                        <div class="group flex flex-col justify-center gap-0  transition-all hover:cursor-pointer lg:min-h-[67px]"
                            v-for="(item, index) in menus" :key="index" @mouseover="e => handlMouseover(index, e)"
                            @mouseleave="mobileMenuShow = false" ref="domref">
                            <div class="flex flex-row items-center gap-2 px-1">
                                <p class="cms-text font-avenir antialiased tracking-[0.01em] sm !m-0 text-white"
                                    style="font-size:18px;font-weight: 400">
                                    {{ item.name }}
                                </p>
                                <div class="transition-all duration-300 stroke-white">
                                    <svg width="11" height="6" viewBox="0 0 11 6" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path d="M0.5 0.600098L5.5 4.6001L10.5 0.600098"></path>
                                    </svg>
                                </div>
                            </div>
                            <span
                                class="block h-[1px] bg-white/70 opacity-0 transition-all duration-300 group-hover:opacity-100">
                            </span>
                        </div>
                        <div
                            class="group flex flex-col justify-center gap-0  transition-all hover:cursor-pointer lg:min-h-[67px]">
                            <div class="flex flex-row items-center gap-2 px-1"><a href="/contact-us"
                                    class="cms-link-wrapper">
                                    <p class="cms-text font-avenir antialiased tracking-[0.01em] sm !m-0 text-white"
                                        style="font-size:18px;font-weight: 400">Get In
                                        Touch
                                    </p>
                                </a>
                            </div>
                            <span
                                class="block h-[1px] bg-white/70 opacity-0 transition-all duration-300 group-hover:opacity-100"></span>
                        </div>
                    </div>
                </div>
                <div class="flex flex-1 flex-row justify-end gap-3 lg:flex-none">
                    <div class="hidden md:block!">
                        <v-btn elevation="0" color="#4396F7" class="text-white bg-[#4396F7]!">
                            <span class="text-[13px]!">
                                Get a Quote
                            </span>
                        </v-btn>
                    </div>

                    <v-btn elevation="0" color="#39c464" class="text-white bg-[#39c464]!">
                        <span class="text-[13px]!">
                            Order Now
                        </span>
                    </v-btn>
                </div>
            </div>
            <FollowBody v-model:show="mobileMenuShow" :type="type" :lefts="transformLs" />
            <SelectMenu v-model:show="drawer" :menus="relustData" />
            <!-- <v-navigation-drawer v-model="drawer" location="top" temporary class="w-full!" :style="{
                'top': 0 + 'px'
            }">
            </v-navigation-drawer> -->
        </div>
    </div>
</template>
<script setup lang="ts">
import { getProjuctCategory } from '~/composables/api/common'
import { getElementScreenPosition } from '../../utils'
import { Head } from '../Head'
import FollowBody from './followBody.vue'
import SelectMenu from './selectMenu.vue'
import { ref, useTemplateRef } from 'vue'
const relustData = await getProjuctCategory();
console.log('relustDatarelustData', relustData);
const mobileMenuShow = ref(false)
const drawer = ref(false)
const type = ref<number>(0)
const domref = useTemplateRef<HTMLDivElement[]>('domref')
const transformLs = ref<number[]>([])
const appBarRef = ref<HTMLDivElement>();
const appBarRef2 = ref<HTMLDivElement>();
const menus = ref<{ name: string, ref: string }[]>([
    {
        name: 'Products',
        ref: 'dom1',
    },
    {
        name: 'About',
        ref: 'refdom1',
    },
    {
        name: 'Partner With Us',
        ref: 'refdom2',
    },
])
const handlMouseover = (index: number, e?: MouseEvent) => {
    console.log('index', index);
    const doms = domref.value?.[index]
    if (!doms) return false
    transformLs.value[index - 1] = getElementScreenPosition(doms)?.left ?? 0
    mobileMenuShow.value = true;
    type.value = index;
}
const handlCick = () => {
    drawer.value = !drawer.value
}
</script>


<style scoped lang="scss">
.head {
    padding-top: 16px;
    padding-bottom: 16px;
}

// 媒体查询pc短
@media (min-width: 768px) {
    .head {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
}
</style>